<template lang="pug">
    div(class="batman-comment")
      paged-panel(@scroll-bottom="getReplies", v-model="page", :completed="completed")
        div(v-for="comment in paged.items", class="batman-comment-list")
          el-row(class="batman-comment-list__item")
            el-col(:span="3", style="text-align:center;")
              img(:src="comment.avatar", class="batman-comment-list_avatar", v-if="comment.avatar")
              svg(class="icon batman-comment-list_avatar", aria-hidden="true", v-else)
                use(xlink:href="#icon-morentouxiang")
            el-col(:span="20")
              div(class="icon batman-comment-list_nickname") {{comment.wxUName}}
              div(class="") {{comment.content}}

              div(class="batman-comment-list_actions") 
                small {{comment.createAt | format('YYYY-MM-DD HH:mm')}} &nbsp;
                el-tag(size="mini", type="info", @click="goto(`/comment/reply?id=${comment.commentId}`)") 回复

      div(v-if="paged.items && paged.items.length == 0", class="batman-comment_empty")
        p
          span 暂无评论! 
          el-button(type="text", @click="empty_action_click") {{emptyAction}}
      batman-comment-form(:visible.sync="formVisible", :post-id="postId", @comment-success="commentSuccess")
</template>

<script>
import form from "./form";
import axios from "@/plugins/axios";
import BaseVue from "@/mixins/BaseVue";
import PagedPanel from "batman-paged-panel";

export default {
  name: "batman-comment",
  components: {
    "batman-comment-form": form,
    "paged-panel": PagedPanel
  },
  mixins: [BaseVue],
  data() {
    return {
      formVisible: false,
      page: { maxResultCount: 10, skipCount: 0 },
      /** 当前评论分页 */
      commentPageIndex: 1,
      paged: { items: [] },
      completed: false
    };
  },
  props: {
    "post-id": { type: String, default: null },
    "empty-action": { type: String, default: "抢沙发" }
  },
  watch: {
    postId(val) {
      if (!val) return;
      this.getReplies();
    }
  },
  methods: {
    /**
     * 方法:显示评论表单
     */
    showForm() {
      this.formVisible = true;
    },
    /**获取评论分页 */
    getReplies(resolve) {
      const options = {
        url: "forum/post/comments",
        method: "post",
        data: { page: this.page, filter: { postId: this.postId } }
      };
      axios(options)
        .then(paged=> this.getRepliesSuccess(paged,resolve))
        .catch(() => {if(resove) resove()});
    },
    getRepliesSuccess(commentPaged, resove) {
      this.paged.totalCount = commentPaged.totalCount;
      this.paged.items = this.paged.items.concat(commentPaged.items);
      if(commentPaged.items.length === 0) this.completed=true;
      if(resove) resove();
    },
    /** 触empty-action-click */
    empty_action_click() {
      this.$emit("empty-action-click");
    },
    commentSuccess(comment) {
      this.$emit("comment-success", comment);
      this.getComment(comment.id);
    },
    getComment(commentId) {
      const options = {
        url: "forum/post/comments",
        method: "post",
        data: { filter: { postId: this.postId, commentId: commentId } }
      };
      axios(options)
        .then(this.getRepliesuccess)
        .catch(() => {});
    },
    getRepliesuccess(paged) {
      if (paged && paged.items && paged.items.length)
        this.paged.items.unshift(paged.items[0]); // 加入到数组开头
    }
  }
};
</script>

<style lang="less" scoped>
@import url("../../../common/common.less");
.batman-comment {
  background-color: white;
  font-size: 13px;

  &_empty {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

.batman-comment-list {
  display: flex;
  width: 100%;

  &__item {
    width: 100%;
    padding: 8px 0 8px;
  }

  &_avatar {
    @avatar_width: 24px;
    width: @avatar_width;
    height: @avatar_width;
    border-radius: @avatar_width;
    box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.37);
  }

  &_nickname {
    color: @avatar_color;
    text-shadow: 0.001em 0.001em 0.001em yellow;
    font-size: 14px;
  }

  &_actions {
    padding: 5px 0;
    color: #a0a0a0;
  }
}
</style>
